<template>
	<view class="container">
		<!-- 最上面部分 -->
		<view class="topBar">
			<view class="left">
				<navigator url="/pages/tea-duan/mine/shezhi/account">
					<image src=../../../static/touxiang.jpg class="a"></image>
					<!-- <view class="kong"></view> -->
					<text style="font-size: large; font-weight: 500; color: #101010;" >晋新</text>
				</navigator>	
			</view>
			<view class="right">
				<navigator url="./erweima/erweima"><image class="iconA " src="../../../static/saomiaoerweima.png"></image></navigator>
				<view class="kong"></view>
				<navigator url="./search/search"><image class="iconA" src="../../../static/sousuo_tianchong.png"></image></navigator>
				
			</view>
			
			
			
			<!-- <view>
				<image class="a" src="../../../static/头像.jpg" ></image>
			</view> -->
		</view>
		<!-- 上面部分 -->
		<view class="top">
			<navigator class="b" url="/pages/tea-duan/news/tongxunlu">
				<view class="bg">
					<image class="ic" src="../../../static/106-tongxunlu.png"></image>
				
				</view>
				<text>通讯录</text>
			</navigator>
			<navigator class="b" url="/pages/tea-duan/news/myclass">
				<view class="bg">
					<image class="ico" src="../../../static/dalou.png"></image>
				
				</view>
				<text>我的班级</text>
			</navigator>
			<navigator class="b" url="/pages/tea-duan/news/notice">
				<view class="bg">
					<image class="ic" src="../../../static/naozhong.png"></image>
				
				</view>
				<text>考试公告</text>
			</navigator>
		</view>
		<!-- 聊天部分 -->
		<navigator class="all">
			<view v-for="(item,index) in items" :key='item.id' class="news">
				<view class="touxiang">
					<image :src="item.src"  class="tou"></image>
				</view>
				<view class="xiaoxi">
					<text class="name">{{item.name}}</text>
					<text class="content" style="color: #C4C4C4; font-weight: 100; font-size: small;">{{item.content}}</text>
				</view>
				<view class="time">
					<text style="color: #C4C4C4;">{{item.time}}</text>
				</view>
				
			</view>
			<view class="no">
					<text style="color: #C4C4C4;">无更多消息</text>
			</view>
		</navigator>
			<view class="tabbar" >
				<view class="one" @click="toNews">
					<image src="../../../static/xiaoxi.png" class="ima"></image>
					<text class="te">消息</text>
				</view>
				<view class="one" @click="toExam">
					<image src="../../../static/examhui.png" class="ima"></image>
					<text class="te">考试</text>
				</view>
				<view class="one" @click="toMy">
					<image src="../../../static/taiyang(1).png" class="ima"></image>
					<text class="te">我</text>
				</view>	
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items:[
					{
						content:'晚上去锻炼吗？',
						name:'燕破岳',
						id:'0',
						src:'../../../static/lixiaosi.jpg',
						time:'17:21'
					},
					{
						content:'作业截止时间晚上8点！',
						name:'软件工程',
						id:'1',
						src:'../../../static/quntouxiang.jpg',
						time:'8:21'
					},
					{
						content:'与众不同，或许很难被人理解，但应该被尊重',
						name:'沈翊',
						id:'0',
						src:'../../../static/lixiaosi.jpg',
						time:'17:21'
					},
					
				],
				
			}
		},
		methods: {
			toNews(){
				uni.redirectTo({
					url:'/pages/tea-duan/news/news'
				})
			},
			toExam(){
				uni.redirectTo({
					url:'/pages/tea-duan/exam/exam'
				})
			},
			toMy(){
				uni.redirectTo({
					url:'/pages/tea-duan/mine/mine'
				})
			},
		}
		
	}
</script>

<style>
	.container{
		height: calc(100vh - 50rpx);
		background-color: #EFEFF4;
	}
	
	/* 最上面的部分 */
	.topBar{
		background-color: #FFFFFF;
		height: 140rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		border-bottom: 2rpx #E9E9E9 solid;
	}
	.left{
		position: relative;
		left: 30rpx;
		bottom: 5rpx;
		display: flex;
		flex-direction: row;
	}
	.right{
		
		display: flex;
		flex-direction: row;
		position: absolute;
		top: 60rpx;
		right: 20rpx;
	}
	.a{
		height: 90rpx;
		width: 90rpx;
		border-radius: 50rpx;
	}
	.iconA{
		height: 60rpx;
		width: 60rpx;
		
		
	}
	.kong{
		height: 60rpx;
		width: 60rpx;
	}
	/* 上部分 */
	.top{
		background-color: #FFFFFF;
		height: 190rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: flex-end;
		border: 2rpx #E9E9E9 solid;
	}
	.b{
		width: 150rpx;
		height: 90%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}
	.bg{
		height: 90rpx;
		width: 90rpx;
		border-radius: 60rpx;
		background-color: #FFFFFF;
		border:6rpx #12754F solid;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.ic{
		height: 70rpx;
		width: 70rpx;
	}
	.ico{
		height: 60rpx;
		width: 60rpx;
		
	}
	/* 消息部分 */
	
	.news{
		width: 100%;
		height: 135rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		border:2rpx #E9E9E9 solid;
		background-color: #FFFFFF;
	}
	.touxiang{
		height: 100%;
		width: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;	
	}
	.tou{
		height: 90rpx;
		width: 90rpx;
		border-radius: 60rpx;
	}
	.xiaoxi{
		height: 100rpx;
		width: 500rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.time{
		height: 100rpx;
		width: 80rpx;
	}
	.no{
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	/* 导航栏 */
	
	.one{
		
		height: 150rpx;
		width: 150rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.ima{
		height: 80rpx;
		width: 80rpx;
		
	}
	.te{
		width: 100rpx;
		height: 50rpx;
		
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		
		
	}
	.tabbar{
		height: 150rpx;
		width: 100%;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		z-index: 5rpx;
		position: fixed;
		bottom: 0rpx;
		
		
	}
</style>
